<template>
    <div class="">
        <div class="data-cards">
            <div class="grid grid-cols-4 gap-x-[16px]">
                <div class="col-span-1 card">
                    <span class="num">41</span>
                    <span>员工总数</span>
                </div>

                <div class="col-span-1 flex flex-col card !border-[#28A745]">
                    <span class="num !text-[#28A745]">1</span>
                    <span>今日有任务员工</span>
                    <div class="users overflow-y-auto">
                        <span class="user-tag">金子金</span>
                        <span class="user-tag">金子金</span>
                        <span class="user-tag">金子金</span>
                        <span class="user-tag">金子金</span>

                        <span class="user-tag">金子金</span>
                        <span class="user-tag">金子金</span>

                        <span class="user-tag">金子金</span>
                        <span class="user-tag">金子金</span>

                        <span class="user-tag">金子金</span>
                        <span class="user-tag">金子金</span>
                        <span class="user-tag">金子金</span>
                        <span class="user-tag">金子金</span>
                    </div>
                </div>

                <div class="col-span-1 card">
                    <span class="num">38</span>
                    <span>今日无任务员工</span>
                    <div></div>
                </div>

                <div class="col-span-1 card !border-[#FD7E14]">
                    <span class="num !text-[#FD7E14]">41</span>
                    <span>请假人数</span>
                </div>
            </div>
        </div>

        <div class="mt-[20px] flex flex-row mb-[10px]">
            <div class="left w-[300px] flex flex-col">
                <div class="bg-[#F5F5F5] p-[20px]">
                    <div class="text-[#000] font-bold mb-[4px]">员工列表</div>
                    <el-input placeholder="搜索员工" v-model="keyword" />
                </div>
                <div class="flex-1 bg-[#fff]">
                    <div class="user-list">
                        <div class="user-item" v-for="item in userList" :key="item.name"
                            @click="handleUserItemClick(item)" :class="{ active: item.id === activeUserId }">
                            <span class="font-bold text-[#000]">{{ item.name }}</span>
                            <el-icon color="#FFC008">
                                <WarnTriangleFilled />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>

            <div class="right bg-[#fff] flex-1 p-[20px]">
                <div>
                    <ElCalendar ref="calendarRef">
                        <template #header="{ date }">
                            <div class="flex w-full flex-row justify-between items-start">
                                <span class="text-[#000] text-[20px] font-bold">{{ activeUser?.name }} 的任务日历</span>

                                <div class="flex items-center">
                                    <el-button type="primary" @click="handlePrevMonth">
                                        <el-icon>
                                            <ArrowLeft />
                                        </el-icon>
                                    </el-button>
                                    <span class="mx-[10px] text-[#333] ">{{ date }}</span>
                                    <el-button type="primary" @click="handleNextMonth">
                                        <el-icon>
                                            <ArrowRight />
                                        </el-icon></el-button>
                                </div>
                            </div>
                        </template>

                        <template #date-cell="{ data }">
                            <div class="h-full  flex flex-col" :class="data.isSelected ? 'is-selected' : ''">
                                <span class="px-[10px] pt-[4px] text-[#000]">{{ dayjs(data.day).format('DD') }}</span>
                                <div class="flex-1">
                                </div>
                                <div class="events-list overflow-y-auto" v-if="getEvents(data.date).length > 0">
                                    <div v-for="item in getEvents(data.date)" :key="item.id">
                                        <el-popover trigger="click" popper-class="event-popover"
                                            placement="bottom-start" :show-arrow="false" :offset="2">
                                            <div class="w-full  bg-[#fff] ">
                                                <div
                                                    class="bg-[#EAECEF] text-[#000] font-bold text-[16px] px-[20px] py-[10px]">
                                                    {{ data.day }}
                                                </div>
                                                <div class="flex justify-between items-center px-[20px] py-[10px] ">
                                                    <span class="text-[#000] font-bold text-[16px]">{{ item.name
                                                    }}</span>
                                                    <span
                                                        class="tag font-bold text-[#28A745] bg-[#EAECEF] px-[6px] py-[2px] rounded-[10px]  text-[14px]">已确认</span>
                                                </div>
                                            </div>

                                            <template #reference>
                                                <div class="event-item flex justify-center"
                                                    @click.stop="handleEventClick(item)">
                                                    <span class="text-[#000] text-[13px] font-bold ">
                                                        {{ item.name }}
                                                    </span>
                                                </div>
                                            </template>
                                        </el-popover>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </ElCalendar>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from "vue";

import {
    WarnTriangleFilled,
    ArrowLeft,
    ArrowRight,
} from "@element-plus/icons-vue";
import dayjs from "dayjs";


const calendarRef = ref(null);

const keyword = ref("");

const activeUserId = ref(null);



const activeUser = computed(() => {
    return userList.value.find((item) => item.id === activeUserId.value);
});

const getEvents = (date) => {
    return [
        {
            name: '任务1',
            date: '2020-01-01',
            type: 'confirmed',
            id: 1
        },
        {
            name: '任务2',
            date: '2020-01-02',
            type: 'unconfirmed',
            id: 2
        },
    ]
}

const userList = ref([
    {
        name: "金子金",
        id: 1,
    },
    {
        name: "蒋子进",
        id: 2,
    },
]);


/**
 * 用户选择
 * @param item 
 */
const handleUserItemClick = (item) => {
    activeUserId.value = item.id;

    // api
};


const handlePrevMonth = () => {
    calendarRef.value.selectDate('prev-month')();
};

const handleNextMonth = () => {
    calendarRef.value.selectDate('next-month')();
};


const handleEventClick = (item) => {
    console.log('click event', item);
}


</script>

<style lang="less" scoped>
.data-cards {
    .card {
        height: 300px;
        padding: 30px;
        background-color: #fff;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-top: 4px solid #6c757d;
        border-radius: 6px;

        .num {
            font-size: 30px;
            font-weight: 600;
            color: #000;
        }

        .users {
            margin-top: 10px;
            padding: 0 30px;
        }

        .user-tag {
            display: inline-block;
            border-radius: 10px;
            font-size: 12px;
            border: 1px solid #ccc;
            padding: 2px 8px;
            margin-right: 8px;
            margin-bottom: 8px;
            color: #000;
        }
    }
}

.left {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.right {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    margin-left: 20px;
}

.user-list {
    .user-item {
        padding: 15px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        border-bottom: 1px solid #eee;
    }
}

.event-item {
    cursor: pointer;
    padding: 2px 4px;

    &:hover {
        background-color: #f0f0f0;
    }
}
</style>


<style lang="less">
.popover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}


.event-popover {
    padding: 0 !important;
    width: 300px !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}


.el-calendar__header {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 0;
}

.el-calendar__body {
    padding: 0;
    border-radius: 6px;

    thead tr th {
        border: 1px solid #ebeef5;
        border-bottom: 0;
        border-left: 0;

        &:first-child {
            border-left: 1px solid #ebeef5;
        }
    }

    .el-calendar-day {
        padding: 0;
        min-height: 120px;
    }
}
</style>